<template>
  <div>
    <div class='idel'>热销推荐</div>
    <div class='lists'>
      <div
        class='list'
        v-for="item in hotList"
        :key="item.id"
      >
        <div class="list_left"></div>
        <div class="list_right">
          <p class="title">{{item.title}}</p>
          <p class="info">{{item.info}}</p>
          <span class='detail'>查看详情</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHot",
  data() {
    return {
      hotList: [
        {
          id: "0001",
          title: "大连圣亚海洋世界1",
          info: "浪漫大连首战，浪漫的海洋主题公园"
        },
        {
          id: "0002",
          title: "大连圣亚海洋世界2",
          info: "浪漫大连首战，浪漫的海洋主题公园"
        },
        {
          id: "0003",
          title: "大连圣亚海洋世界3",
          info: "浪漫大连首战，浪漫的海洋主题公园"
        },
        {
          id: "0004",
          title: "大连圣亚海洋世界4",
          info: "浪漫大连首战，浪漫的海洋主题公园"
        },
        {
          id: "0005",
          title: "大连圣亚海洋世界5",
          info: "浪漫大连首战，浪漫的海洋主题公园"
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variavle'
p
  margin 0
  padding 0
.idel
  height 0.64rem
  line-height 0.64rem
  text-indent 0.3rem
  background #eee
  font-size 0.28rem
.list
  width 100%
  font-size 0.2rem
  display flex
  padding 0.12rem
  .list_left
    width 1.8rem
    height 1.8rem
    background #ccc
  .list_right
    flex 1
    text-indent 0.2rem
    min-width 0
    .title
      font-size 0.24rem
      height 0.5rem
      line-height 0.5rem
      ellipsis()
    .info
      color #666
      height 0.5rem
      line-height 0.5rem
      ellipsis()
    .detail
      text-indent 0
      background orange
      padding 0.05rem 0.2rem
      border-radius 0.13rem
      margin-left 0.2rem
      margin-top 0.3rem
      display inline-block
</style>
